<template>
  <div id="map" class="card"></div>
</template>

<script>
import * as echarts from 'echarts'
import jsonData from '@/assets/Json/guiyang.json'
export default {
  data () {
    return {
      option: {
        visualMap: { // 左下角选峰值的小插件(视觉映射组件)
          show: false, // 是否显示视觉映射组件
          min: 0, // 最小值
          max: 100, // 最大值
          text: ['最大值', '最小值'], // 上下两端的文本内容
          textStyle: {
            color: '#fff' // 文字的颜色
          },
          realtime: false, // 拖拽时，是否实时更新
          calculable: true, // 是否显示拖拽用的手柄
          inRange: {
            // color: ['#00bbf2', '#f59557', '#f86505'] // 图元的颜色 - 注：使用颜色梯度时启用
          }
        },
        tooltip: { // 鼠标移入后展示数据
          show: false
        },
        geo: {
          center: undefined,
          zoom: 1,
          layoutCenter: ['50%', '50%'],
          layoutSize: '100%',
          map: 'gy',
          show: true,
          animationDurationUpdate: 0,
          label: {
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#091632',
              borderColor: '#1773c3',
              shadowColor: '#1773c3',
              shadowBlur: 20
            }
          },
          emphasis: {
            disabled: true
          }
        },
        series: [ // 地图参数
          {
            type: 'map', // 地图类型
            zoom: 1, // 缩放比例
            map: 'gy', // 对应 registerMap 中的 mapName 名称
            layoutCenter: ['50%', '50%'], // 地图中心在屏幕中的位置
            layoutSize: '95%', // 地图的大小(支持相对于屏幕宽高的百分比或者绝对的像素大小)
            label: { // 图形上的文本标签
              show: true, // 显示文本标签
              color: '#fff', // 字体颜色
              fontSize: 20
            },
            itemStyle: {
              // 鼠标移入前的样式
              borderColor: '#216ead',
              borderWidth: 1,
              shadowColor: '#216ead',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
              color: '#103e7c', // 地图区域的颜色(背景颜色)
              label: { // 图形上的文本标签
                show: true, // 显示文本标签
                color: '#fff' // 字体颜色
              },
              emphasis: { // 鼠标移入后的样式
                borderWidth: 2, // 图形的描边线宽
                borderColor: '#fff', // 图形的描边颜色
                areaColor: '#16f5ff', // 地图区域的颜色(背景颜色) none.无样式
                label: { // 图形上的文本标签
                  show: true, // 显示文本标签
                  color: '#fff' // 字体颜色
                }
              }
            },
            select: { // 地图选中区域样式
              itemStyle: {
                borderWidth: 2, // 图形的描边线宽
                borderColor: '#3bb3ff', // 图形的描边颜色
                areaColor: '#1083e2' // 地图区域的颜色(背景颜色)
              },
              label: { // 图形上的文本标签
                show: true, // 显示文本标签
                color: '#fff' // 字体颜色
              }
            },
            data: this.area // 数据内容数组
          }
        ]
      },
      area: [
        { name: '南明区', value: 2 },
        { name: '云岩区', value: 3 },
        { name: '观山湖区', value: 8 },
        { name: '乌当区', value: 9 },
        { name: '花溪区', value: 10 },
        { name: '白云区', value: 11 },
        { name: '高新区', value: 12 },
        { name: '经开区', value: 13 },
        { name: '双龙区', value: 172 }
      ],
      active: ''
    }
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      echarts.registerMap('gy', jsonData) // 生成矢量数据地图 第一个值(地图名称) 第二个值(geoJson格式的数据)
      this.myChartMap = echarts.init(document.getElementById('map')) // 初始化图表
      this.myChartMap.setOption(this.option) // 设置配置项和数据并显示图表
      // 鼠标点击事件
      this.myChartMap.on('click', param => {
        // 选中处理
        const newRegionsData = []
        if (this.active === param.name) {
          this.active = ''
          jsonData.features.forEach(item => {
            newRegionsData.push({
              name: item.properties.name
            })
          })
          this.option.series[0].data = newRegionsData
          this.myChartMap.setOption(this.option)
          this.updateArea(0)
        } else {
          jsonData.features.forEach(item => {
            let color = '#103e7c'
            if (param.name === item.properties.name) {
              color = '#1083e2'
              this.active = param.name
            }
            newRegionsData.push({
              name: item.properties.name,
              itemStyle: {
                color: color
              }
            })
          })
          this.option.series[0].data = newRegionsData
          this.myChartMap.setOption(this.option)
          const scope = this.area.filter(item => item.name === param.name)[0]
          this.updateArea(scope ? scope.value : 0)
        }
      })
    },
    updateArea (id) {
      this.$emit('updateAreaID', id)
    },
    handleChooseArea (title) {
      let isTrue = false
      this.area.forEach(item => {
        if (item.name === title) {
          this.updateArea(item.value)
          this.init.getChartData(520100)
          isTrue = true
        }
      })
      if (!isTrue) {
        this.$message.warning('很抱歉，暂时没有数据哦！')
      }
    },
    handleBack () {
      this.init.getChartData(520100)
      this.$emit('updateAreaID', 0)
    }
  }
}
</script>
<style lang="less" scoped>
  .card {
    height: 100%;
    position: relative;
  }
  .button-group {
    position: absolute;
    right: 10px;
    bottom: 100px;
    width: 100px;
    .ant-btn {
      background-color: transparent;
      border-color: #1890ff;
      margin-bottom: 10px;
    }
  }
</style>
